<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>考试前</title>
  <style>
   

   .button {
      padding: 20px 30px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
      font-size: 16px;
      width: 200px; 
      margin: 0 auto; 
      overflow: hidden;
      display: grid;
      justify-items: center;
    }
    .container
    {
      display: grid;
      justify-items: center;
    }
    .countdown{
      width:240px;
      height: 305px;
      margin: 0 auto;
      text-align: center;
      line-height: 1;
      color:black;
      overflow: hidden;
      display: grid;
      justify-items: center;
      border-width: 2px;
  border-style:solid;
  border-color:black;
    }
    .countdown .next
    {
      font-size: 16px;
      margin: 25px 0 14px;
    }
    .countdown .clock span,
    .countdown .clock i{
    display: block;
    text-align: center;
    line-height: 34px;
    font-size: 23px;
    float: left;
    }
    .countdown .clock span
    {
width: 34px;
height: 34px;
border-radius: 2px;
background-color: black;
color: aliceblue;
    }
    .countdown .clock i{
width: 20px;
font-style: normal;
    }
    .countdown small{
      font-size: 17px;
    }
    table {
    position: fixed;
      border-collapse: collapse;
      width: 50%;
    }

    td {
      border: 1px solid black;
      padding: 5px;
      text-align:center;
    }
  </style>
</head>


<body>
  <div class="container">
    <table id="countdownTable"  >
      <tr>
        <td>考试开始时间</td>
        <td>2024-07-15 14:30:00</td>
      </tr>
    </table>
  </div>
<br>
<br>

  <div class="countdown">
  <p class="next">考试开始倒计时</p>
  <p class="next">请做好准备</p>
  <p class="clock">
    <span id="hour">00</span>
    <i>:</i>
    <span id="minute">00</span>
    <i>:</i>
    <span id="second">00</span>
  </p>
      </div>
      <br><br><br>
      <button class="button" onclick="gotoExam()">进入考试</button>

    <script>
  function getCurrentTime() {
      return new Date();
    }

    function getenddTime()
    {
      return new Date('2024-8-1 14:30:00')
    }
    // 计算剩余时间
    function calculateCountdown() {
      const currentTime = getCurrentTime();
      const endTime=getenddTime();
      const timeDifference = endTime - currentTime;
      const h = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const m = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
      const s= Math.floor((timeDifference % (1000 * 60)) / 1000);
      if(h<10){
      document.querySelector('#hour').innerHTML='0'+h;
      }
      else{
        document.querySelector('#hour').innerHTML=h;
      }
      if(m<10){
      document.querySelector('#minute').innerHTML='0'+m;
      }
      else{
        document.querySelector('#minute').innerHTML=m;
      }
      if(s<10){
      document.querySelector('#second').innerHTML='0'+s;
      }
      else{
        document.querySelector('#second').innerHTML=s;
      }
      
    }
    calculateCountdown();
    // 每隔 1 秒更新倒计时
    setInterval(calculateCountdown, 1000);
    function gotoExam()
    {
      window.location.href='exam.html';
    }
  </script>
</body>

</html>